<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p11_定位广告</title>
    <style>
        .top{
            background-color: #5AA4AE;
            height: 120px;
            position: fixed;
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top:300px;
        }
        .left{
            background-color: #FFF799;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">  我是顶部的广告条</div>
<div class="left">  我是左边的广告条</div>
<div class="right">  我是右边的广告条</div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda consectetur deleniti ea
        eligendi esse et excepturi fuga id incidunt iste laboriosam placeat quis soluta sunt tenetur ullam, voluptas
        voluptate.
    </div>
    <div>Aperiam at corporis dicta dolor dolorum, eaque earum eligendi enim error harum ipsa magnam, mollitia nihil non
        numquam odio pariatur perferendis perspiciatis quam ratione, repellendus ullam ut. Dolores, iusto vel.
    </div>
    <div>Commodi cupiditate, nam perspiciatis quas repellat rerum? Accusamus accusantium alias assumenda consequuntur
        debitis delectus dolorem eveniet expedita in labore necessitatibus, officia quasi quis quos sequi totam unde,
        velit veritatis. Ipsum?
    </div>
    <div>Accusamus atque error molestias qui repellendus. Adipisci aut corporis cum delectus deleniti deserunt
        dignissimos dolores earum eligendi facere id in, incidunt necessitatibus nostrum nulla quas quidem quis, quos,
        reprehenderit voluptatum?
    </div>
    <div>Natus nesciunt obcaecati praesentium provident quod repellat, sit. Ab animi architecto beatae dolorem esse ex
        fugiat hic id impedit itaque natus nostrum, odit perferendis quas quo ratione repudiandae vero voluptate!
    </div>
    <div>Consequatur corporis cumque debitis, fugit optio ratione tempore. Accusantium assumenda aut beatae corporis
        deserunt distinctio eaque fugit in incidunt ipsa iste, nemo pariatur possimus quae quibusdam sapiente sed totam,
        voluptatum!
    </div>
    <div>Ad blanditiis culpa dolorum ducimus earum eos error, est ex fugiat ipsum itaque laboriosam neque nesciunt nisi
        officia, quae quasi suscipit tempore unde veniam! Ad facilis molestias obcaecati quod! Dolorem.
    </div>
    <div>Ab aperiam aspernatur atque blanditiis delectus deleniti dolore et excepturi facilis illum laborum maxime
        minima minus, nam natus necessitatibus nemo nisi optio porro quae repudiandae ut velit veritatis voluptas
        voluptates!
    </div>
    <div>Ab accusamus ad amet autem, consectetur consequatur dignissimos dolorem dolorum, exercitationem fugiat, ipsam
        iusto maiores nemo odio odit pariatur perspiciatis quas quos sint sunt tempora veniam voluptatibus!
        Consequuntur, facilis, minima.
    </div>
    <div>Cum ea fugit labore, maiores omnis optio recusandae repellat. Accusantium aspernatur blanditiis distinctio
        dolor dolorem, eligendi eveniet ex fugit impedit magnam natus nemo, neque nesciunt, officiis optio quod
        recusandae saepe.
    </div>
    <div>Alias assumenda dignissimos distinctio esse, eum eveniet ex expedita explicabo fuga in inventore, ipsa iusto
        libero minima optio quae vero voluptas voluptatum? Accusamus autem cumque dolores iste laboriosam,
        necessitatibus unde?
    </div>
    <div>Consequatur debitis deleniti deserunt dolores ducimus enim harum, illum laudantium magnam molestias nostrum
        numquam optio perferendis placeat porro quae quia quidem ratione rem repellat soluta tempora temporibus vel
        veniam voluptatum!
    </div>
    <div>Ab asperiores blanditiis delectus dolor, eos iste iure, magni maxime odit officia perspiciatis porro quibusdam
        unde? Blanditiis in nostrum, odit ratione sequi veritatis voluptates! Amet, fugiat, fugit? Dignissimos, ipsa,
        provident!
    </div>
    <div>Alias aliquid asperiores at, beatae blanditiis corporis distinctio dolorem eligendi esse eum fuga in, labore
        laudantium modi necessitatibus non nulla officia officiis, perspiciatis quis quisquam quod similique totam.
        Accusantium, voluptatibus!
    </div>
    <div>Consequatur deserunt dolor harum ipsa minus nam nobis odio, officia porro quia quos ratione reprehenderit sed
        sint voluptate? Ab, amet delectus dolor magnam modi praesentium quaerat quibusdam temporibus vitae voluptas.
    </div>
    <div>Accusamus ad amet dicta dolore enim eos et explicabo, facere illum iste iure libero, maxime minima minus neque
        nulla odio odit officia omnis praesentium quia sapiente soluta suscipit velit, voluptas.
    </div>
    <div>Dolorum explicabo fugit laborum libero magni natus nihil nobis quia sed voluptates. Aperiam dolorem eos
        excepturi ipsam laboriosam quidem reiciendis temporibus veritatis vitae voluptatum. Commodi earum fugiat soluta
        vitae voluptate.
    </div>
    <div>Accusamus atque, corporis, culpa debitis dignissimos dolorum eius ex explicabo iste laborum maxime neque nulla
        odio optio quas quos ratione repellat totam veniam, voluptatem. Ad corporis distinctio ex maxime sint?
    </div>
    <div>Aliquid architecto aut cupiditate est et exercitationem explicabo iure laboriosam laborum magnam maxime numquam
        omnis perferendis perspiciatis praesentium quam quas similique, sint ullam vitae. Accusantium consectetur
        dignissimos excepturi saepe soluta?
    </div>
    <div>Aliquid asperiores autem corporis dignissimos, dolore dolorem eum fuga illum ipsam labore magnam nam natus
        neque nobis perferendis placeat possimus quidem, quis quisquam sapiente tempora totam vitae voluptate voluptates
        voluptatum!
    </div>
    <div>Amet at culpa cumque deleniti ea earum eos et explicabo impedit inventore iusto, labore maiores mollitia odio
        quaerat, quas quidem, sequi ut. A aliquam atque laboriosam nobis quae qui ullam!
    </div>
    <div>Adipisci animi aperiam architecto aut consequuntur culpa eos error esse eveniet explicabo in labore minima
        necessitatibus nobis omnis optio praesentium quas, quis quisquam, saepe sit sunt suscipit tempora veniam vitae?
    </div>
    <div>Deserunt dolores facere libero minima necessitatibus perferendis placeat possimus ut. Deleniti facere nihil
        repudiandae sequi sint voluptas. A dignissimos iure natus quas quidem repellat unde. Ad aut eligendi iusto vero.
    </div>
    <div>Nesciunt quae vero voluptatum! Dicta dolorem doloribus, eligendi incidunt maiores quae rem unde vel. A,
        dignissimos eligendi ex ipsa iure, nesciunt odit pariatur placeat possimus qui quisquam ratione, ullam ut?
    </div>
    <div>Blanditiis commodi cupiditate delectus deserunt dolorem dolores dolorum ducimus ea eaque eius eligendi enim
        fugit, labore laborum minus modi nam necessitatibus non odit quasi quod, rem saepe suscipit velit voluptates.
    </div>
    <div>Commodi consectetur dignissimos dolore eaque et eum expedita explicabo fugit ipsum laborum natus nemo nobis
        nostrum omnis optio, placeat porro provident quam quas, reprehenderit sit totam unde velit vitae voluptatum?
    </div>
    <div>Ad aut commodi consequuntur debitis dolor doloremque ea eum expedita harum minus, molestias nemo nostrum
        obcaecati placeat quaerat quas quidem rem repellat sequi sunt velit veniam vero. Earum, omnis, similique?
    </div>
    <div>Accusamus architecto aspernatur aut, consequuntur cum, debitis dolore dolorem eligendi fugiat inventore ipsam
        magni maxime molestiae nam non perspiciatis quam recusandae reiciendis sed sequi tempore totam unde ut velit
        voluptas!
    </div>
    <div>Asperiores est minus quaerat quis? Adipisci aperiam autem corporis, cum ea eligendi officiis quia quis quisquam
        rem suscipit tenetur vitae! At aut dolor dolore excepturi exercitationem perferendis quae tempora temporibus.
    </div>
    <div>Dicta inventore nemo pariatur perferendis quam qui, sint tenetur voluptatum. Accusamus amet blanditiis commodi
        ex inventore iure molestias perspiciatis possimus. At dolorem eius excepturi, facere modi natus nulla
        repudiandae veritatis.
    </div>
    <div>Accusantium aliquam, animi commodi distinctio facere fugit ipsa labore mollitia sed vero. Nisi non quasi quos?
        Accusamus hic illum ipsa molestiae nostrum optio tempore. Non sit soluta vel? Architecto, iusto!
    </div>
    <div>A accusamus atque aut beatae, eum ex facilis illum impedit nihil optio provident quo quod saepe sed sit soluta
        unde voluptates. Aperiam cumque excepturi expedita hic, recusandae rem. Id, ut!
    </div>
    <div>Ab ad blanditiis, commodi corporis cupiditate dolores est explicabo facilis fuga harum id illo maxime
        necessitatibus nesciunt officia, omnis possimus provident quaerat quos reiciendis tenetur vel, velit veritatis
        voluptas voluptates.
    </div>
    <div>Consequuntur incidunt nemo possimus vero voluptates! Debitis delectus ea earum eius rem? Consequuntur
        cupiditate dicta earum exercitationem, fugit illo iste maxime minima, modi nemo perspiciatis quaerat quia
        quisquam recusandae repellendus.
    </div>
    <div>Aspernatur at commodi, consequatur consequuntur distinctio doloremque, earum eligendi et, explicabo facilis
        itaque iusto maxime neque nesciunt nihil perspiciatis saepe tempora vitae voluptates voluptatibus. Eaque eveniet
        porro quod totam vero.
    </div>
    <div>Eum incidunt odit sed sint voluptatibus? Cum, doloremque exercitationem id laudantium nulla recusandae sunt
        tempore. Aliquid beatae deserunt nulla odio placeat qui tempore veniam vitae voluptatem. Architecto culpa
        voluptates voluptatum.
    </div>
    <div>Alias, at atque autem consequatur corporis cumque dolor doloremque doloribus earum eum ex excepturi, fuga fugit
        iste nostrum placeat porro quod, ratione rem soluta temporibus ullam veniam? Amet, iste quidem.
    </div>
    <div>Ex id illo odio quibusdam sequi. Ad explicabo fuga harum iusto maiores minima, necessitatibus officia officiis
        pariatur quae quo repudiandae veritatis vitae. Dolore dolorem eveniet fugit reiciendis sunt temporibus,
        voluptate!
    </div>
    <div>Accusantium aliquam consequuntur, cupiditate et itaque molestiae nesciunt odio possimus praesentium
        repellendus? Alias asperiores beatae cum deserunt sint! Consectetur dicta error fugit molestias quasi quia
        recusandae. Culpa dolor provident veniam?
    </div>
    <div>Accusamus assumenda autem consequuntur delectus dolore dolores eaque earum esse eum excepturi fuga hic laborum
        natus nobis non nostrum odio perferendis quibusdam, quod quos reiciendis rem rerum sunt vel, voluptatibus.
    </div>
    <div>Autem dignissimos illo ipsam maxime repudiandae! Adipisci ex id in iste nulla officia quam qui reiciendis
        reprehenderit veritatis. Asperiores aspernatur, earum ex inventore minus molestiae natus nihil quo quod rerum!
    </div>
    <div>Delectus illum inventore maxime praesentium quisquam. Amet animi asperiores blanditiis delectus, earum eveniet
        facilis fugiat fugit ipsum iste, laborum neque numquam omnis praesentium, quibusdam quos repellendus sed sit
        velit voluptatibus!
    </div>
    <div>Aliquid at beatae dolorum esse eum excepturi, expedita explicabo fuga fugiat maiores molestias, nobis nulla
        numquam, obcaecati porro quis sequi. Blanditiis dolor dolorum eum labore mollitia officiis recusandae
        repudiandae suscipit?
    </div>
    <div>Aliquam amet, beatae consequuntur delectus dolorem fuga incidunt itaque laboriosam minus modi neque nesciunt
        nobis, non pariatur quaerat quas quibusdam quis recusandae rem repellat reprehenderit sequi tenetur ut, velit
        voluptas!
    </div>
    <div>Accusamus aliquam culpa doloribus earum numquam praesentium quas tempora? Ab accusantium aliquam cum delectus
        doloremque dolores dolorum ducimus earum facere illo illum, in nulla officiis possimus qui recusandae vel vitae.
    </div>
    <div>Accusamus aliquid amet aut autem consequatur corporis debitis, deserunt dignissimos dolore esse facere illum
        impedit ipsam iusto maxime necessitatibus obcaecati odio optio quas qui repellat repellendus rerum sit
        temporibus velit?
    </div>
    <div>Ab aliquam aliquid aperiam assumenda at beatae blanditiis consequatur enim, et eveniet exercitationem
        explicabo, iusto laborum mollitia obcaecati optio quas quibusdam quisquam quos similique sit ullam vel velit
        voluptates voluptatibus.
    </div>
    <div>Ad adipisci, aperiam doloribus impedit itaque laudantium modi nesciunt non possimus quod, sed sequi tenetur
        ullam, veritatis voluptatum! Eveniet fugit inventore ipsam nulla obcaecati quas ratione reiciendis repellendus
        sint tempore.
    </div>
    <div>A alias asperiores at blanditiis debitis doloremque dolores eos ex in iusto maxime, neque praesentium quae quas
        quisquam quod reprehenderit saepe sequi similique vero. Corporis cumque eos eveniet optio tempore?
    </div>
    <div>Adipisci animi consequatur distinctio dolores eveniet nostrum quo quos tempora, tenetur voluptatum! Impedit
        pariatur perspiciatis quae quod reiciendis, sit veritatis? Accusamus cupiditate et iure labore modi natus
        sapiente temporibus totam?
    </div>
    <div>Accusantium adipisci aliquam impedit ipsam possimus quia. Ab cupiditate deserunt dolorem dolorum eligendi
        excepturi ipsum itaque mollitia neque nisi, nulla quae quas saepe sit sunt, tempora tempore temporibus, ut
        voluptatem?
    </div>
    <div>Architecto officia optio quod unde voluptas? Accusantium, blanditiis ducimus ex magnam minima pariatur
        perspiciatis quasi recusandae. Beatae consequuntur cumque dolorum, error inventore minima natus nihil omnis
        pariatur perspiciatis ratione ullam!
    </div>
    <div>A aliquam atque aut consequatur cupiditate delectus doloribus, ea est eum expedita explicabo fugiat id iure
        laboriosam molestiae neque nostrum officia omnis pariatur quae rem reprehenderit tempore voluptate voluptatibus
        voluptatum.
    </div>
    <div>Aliquid est illo nemo numquam repellendus totam voluptatibus! Ad atque beatae commodi eius eum ex facere fuga,
        iste iusto minus, provident reiciendis, soluta! Adipisci culpa eius error maiores, repellendus sed.
    </div>
    <div>Amet animi, aperiam architecto consequatur dicta dignissimos dolor eaque eos error ex harum hic neque nulla,
        optio pariatur perferendis quae quidem quo quos soluta vel vitae, voluptas! Expedita, iste, tempore.
    </div>
    <div>Accusamus adipisci alias doloremque eos esse facere fugiat, inventore iusto laborum magnam maxime, molestias
        nihil nisi non odio officia quis quo quod recusandae repellat saepe ut, voluptas? Laboriosam perspiciatis,
        quisquam.
    </div>
    <div>Adipisci, cumque debitis dolorem doloremque dolorum eius error ex facere fuga fugiat ipsam necessitatibus nemo
        nihil officia pariatur perspiciatis provident quasi, quod repudiandae similique tempore, ut vel veniam vitae
        voluptate!
    </div>
    <div>Alias consectetur consequuntur debitis deserunt dicta dolorum earum eius enim eveniet, expedita illo libero
        minima natus neque numquam perspiciatis provident quam quas quia ratione sapiente sunt unde vitae. Cum, rerum?
    </div>
    <div>Blanditiis dicta dolorem, et exercitationem, iste laborum minus modi necessitatibus nemo odio omnis optio
        provident quas quasi quia tempora, tenetur unde voluptates. Assumenda at dignissimos doloribus eius ipsam
        libero, nam?
    </div>
    <div>Earum incidunt nam nisi numquam qui quis quo repudiandae sapiente sed sunt. Adipisci aliquid assumenda
        dignissimos dolor est laborum maiores veritatis. Amet culpa et, fugit mollitia nostrum officia quidem voluptas!
    </div>
</div>
</body>
</html>